<template>
    <div class="reportForm">
        <!-- 头部饼图 -->
        <div class="headerBox">
            <div v-for="(item, index) in list" :key="index" class="headerBoxItem">
                <div>{{ item.name}} <span class="subfix" >（包含部门及员工资产）</span> </div>
                <div :id="'echarts'+index"></div>
            </div>
        </div>
        <!-- 部门资产月统计 -->
        <div class="twoPart">
            <div class="first">
                <span>当前部门名称 - 人员领用资产统计</span>
            </div>
            <div class="item" v-for="(item, index) in listOfReceive" :key="index">
                    <img :src="item.avatar" alt="">
                    <span>{{item.re_user_name}}</span>
                    <div>
                        数量 
                        <el-tooltip :disabled="showIt" class="item" effect="dark" :content="String(item.f_num)" placement="bottom">
                            <span @mouseenter="visiable">{{item.f_num}}</span>
                        </el-tooltip>
                        件 <span style="color:rgba(227, 227, 227, 1)">丨</span> 价值 
                        <el-tooltip :disabled="showIt" class="item" effect="dark" :content="String(item.f_price)" placement="bottom">
                            <span @mouseenter="visiable">{{item.f_price}}</span>
                        </el-tooltip>
                        元
                    </div>
                    <div>
                        维修 
                        <el-tooltip :disabled="showIt" class="item" effect="dark" :content="String(item.r_num)" placement="bottom">
                            <span @mouseenter="visiable">{{item.r_num}}</span>
                        </el-tooltip>
                        次 <span style="color:rgba(227, 227, 227, 1)">丨</span> 花费 
                        <el-tooltip :disabled="showIt" class="item" effect="dark" :content="String(item.rp_price)" placement="bottom">
                            <span @mouseenter="visiable">{{item.rp_price}}</span>
                        </el-tooltip>
                        元
                    </div>
                    <div>
                        报失 
                        <el-tooltip :disabled="showIt" class="item" effect="dark" :content="String(item.l_num)" placement="bottom">
                            <span @mouseenter="visiable">{{item.l_num}}</span>
                        </el-tooltip>
                        次 <span style="color:rgba(227, 227, 227, 1)">丨</span> 损失 
                        <el-tooltip :disabled="showIt" class="item" effect="dark" :content="String(item.l_price)" placement="bottom">
                            <span @mouseenter="visiable">{{item.l_price}}</span>
                        </el-tooltip>
                        元
                    </div>
            </div>
        </div>
        <!-- 个人使用资产排行榜 -->
        <div class="onePart">
            <div id="mechartsOfUser"></div>
              <div class="shouwMoare">
                    <div style="margin-right:25px">展示消耗费用最多的前30名</div>
                    <el-date-picker style="width:136px" @change='getMonth()' :clearable="false" v-model="form.month" value-format='yyyy-MM' type="month"  placeholder="选择月"></el-date-picker>
                    <el-button @click="form.page++;getMonth()" :disabled="form.disabled" round>查看更多</el-button>
                </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import moment from 'moment' 
import {getDeptData,getDeptUserCount} from '../api'
export default {
    name:"reportForm",
    props:{
        dept:'',
    },
    data(){
        return {
            dept_id:'',
            showIt:true,
            form:{
                month:new Date(),
                page:1,
                data:[],
                disabled:false,
            },
            list:[],
            listOfReceive:[]
        }
    },
    mounted(){
        this.getData(this.dept)
    },
    methods:{
        /**当鼠标放上去时，检测文字是否超出div 宽度*/
        visiable(e){ 
          this.showIt = e.target.scrollWidth>e.target.offsetWidth?false:true
        },
        /**头部bin */
        getReportformFn(dept_id){
            getDeptData({dept_id}).then(res=>{
                this.list = res.count
                this.listOfReceive = res.receive
                res.count&&res.count.length?res.count.forEach((element,index) => {
                    this.setBin(index,element)
                }):''
            })
        },
        /*底下的 */
        getMonth(label){
            if(label=='no'){
                this.form.month = ''
            }
            getDeptUserCount({dept_id:this.dept_id,month:moment(this.form.month).format('YYYY-MM'),page:this.form.page}).then(res=>{
                let obj = {
                    label:'个人使用资产排行榜',
                    subtext:'',
                    name:['资产数量','资产价值'],
                    xAxisName:'re_user_name',
                    xAxisAdd:'',
                    rotate:0,
                    bottom:60,
                }
                this.form.disabled = Number(res.current_page)>=Number(res.last_page) 
                if(this.form.page==1){
                    this.form.data = res.data
                }else{
                    this.form.data = [...this.form.data,res.data]
                }
                this.setBar('mechartsOfUser',this.form.data,obj)
            });
            
        },
        /**设置柱状图 */
        setBar(obj,data,subfix){
           let maxSpan = Math.floor((window.innerWidth-320)/40)
           let option = {
               dataZoom: {
                    show:data.length>maxSpan, // 为true 滚动条出现
                    realtime: true,  
                    type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                    height: 20, // 表示滚动条的高度，也就是粗细
                    maxValueSpan:maxSpan,
                },
               color: ['#00BB7A', '#FF9502',],
                title: {
                    text: [
                        `{a|${subfix.label}}{b|${subfix.subtext}}`
                    ],
                    left:'37px',
                    textStyle:{
                        rich: {
                            a: {
                                lineHeight: 24,
                                color: 'rgba(16, 16, 16, 1)',
                                fontSize: 16,
                                fontWeight:600,
                            },
                            b: {
                                color: '#939393',
                                fontSize: 10,
                            },
                        }
                        
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: ''
                        // type: 'shadow'
                    },
                    formatter:'{a0}: {c0}件<br />{a1}: {c1}元'
                },
                legend: {
                    data:subfix.name,
                    top:subfix.top,
                    right:subfix.right||475,
                    textStyle:{
                        fontSize:14,
                        color:'rgba(70, 70, 70, 1)',
                    },
                },
                grid: {
                    left: '3%',
                    top:'25%',
                    right:'5%',
                    bottom:subfix.bottom||85,
                    show:false,
                    containLabel:false,
                },
                yAxis:[
                    {
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                        
                    },
                    {
                        type: 'value',
                        name: '价值',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                    },
                ],
                xAxis : {
                    type: 'category',
                    axisTick: {
                        show: false,
                        interval:0,
                    },
                    axisLabel:{
                        rotate :subfix.rotate||45,
                    },
                    data:data&&data.length?data.map(item=>{
                        return item[subfix.xAxisName]+subfix.xAxisAdd
                    }):[]
                },
                series: [
                    {
                        name: subfix.name[0],
                        type: 'bar',
                        barWidth:10,
                        barGap: 40,
                        data: data&&data.length?data.map(item=>{
                            return item.count
                        }):[]
                    },
                    {
                        name: subfix.name[1],
                        type: 'bar',
                        barGap: 0,
                        barWidth:10,
                        yAxisIndex: 1,
                        data: data&&data.length?data.map(item=>{
                            return  Number(item.sum)
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById(obj))
                echarts.setOption(option);
            })
        },
        /*获取所有数据 */
        getData(dept_id){
            this.dept_id = dept_id||'361254061'
            this.getReportformFn(this.dept_id)
            this.getMonth(1)
        },
        /**设置饼图 */
        setBin(index,element){
            let  option = {
                color:['#00BB7A','#FF9502'],
                legend: {
                    orient: 'horizontal',
                    icon: 'circle',
                    bottom:0,
                    left: 0,
                    textStyle:{
                        width:'50%'
                    },
                    data:element.status&&element.status.length?element.status.map(item=>{
                            return item.status_name
                    }):[]
                },
                series: [
                    {
                        type: 'pie',
                        radius: [47, 57],
                        center: ['50%',96],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter : [
                                    // `{a|${arr[index]}}`,
                                    `{b|${Math.round(element.status[1].status/element.status[0].status * 100) + "%"}}`
                                ].join('\n'),
                            rich:{
                                a: {
                                    color:'rgba(174, 174, 178, 1)',
                                    lineHeight:30,
                                    fontSize: 14,
                                    fontWeight:400
                                },
                                b: {
                                    color: 'rgba(16, 16, 16, 1)',
                                    fontSize: 20,
                                    fontWeight:600
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            
                        },
                        data:element.status&&element.status.length?element.status.map(item=>{
                            return {value:item.status,name:item.status_name}
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById('echarts'+index))
                echarts.setOption(option);
            })
        }
    }
}
</script>

<style lang='stylus'>
.reportForm
    .headerBox 
        display flex 
        flex-wrap wrap
        margin-top 10px
        >div:last-child 
            margin-right 0
        .headerBoxItem
            width: 267px;
            height: 253px;
            border-radius: 4px;
            margin-right 15px
            background-color: rgba(255, 255, 255, 1);
            font-family: Roboto;
            padding 20px 30px 30px 30px
            margin-bottom 10px
            display flex
            flex-direction column
            >div:first-child 
                line-height : 24px;
                color: rgba(16, 16, 16, 1);
                font-size: 16px;
                font-weight 600
                padding-bottom 7px
                border-bottom  1px solid rgba(242, 242, 242, 1);
                .subfix
                    color: rgba(147, 147, 147, 1);
                    font-size: 10px;
            >div:last-child 
                flex 1
    .twoPart
        background-color #fff
        padding 24px 0 28px 0
        margin-bottom 10px
        >div:first-child   
            line-height : 24px;
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            font-weight 600
            padding-bottom 12px 
            margin 0 37px 6px 37px
            border-bottom 1px solid rgba(240, 240, 240, 1);
        .item 
            display inline-flex
            flex-direction column
            align-items center
            padding 24px 0 18px 0
            width: 217px;
            position relative
            height: 101px;
            margin 64px 21px 0 37px
            border-radius: 2px;
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            box-shadow: 0px 0px 10px 0px rgba(221, 221, 221, 0.4);
            border: 1px solid rgba(255, 255, 255, 0);
            >img 
                width: 53px;
                position absolute
                top -37px 
                left 83px
                height: 53px;
                border-radius 50%
            >span
                line-height : 20px;
                height 20px
                color: rgba(64, 64, 64, 1);
                font-weight 600
            >div 
                line-height : 20px;
                color: rgba(130, 130, 130, 1);
                margin-top 8px
                display flex
                align-items center
                >span 
                    overflow: hidden;
                    height 15px
                    line-height 15px
                    padding 0
                    margin 0
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    text-align center
                    display inline-block
                >span:first-child 
                    width 25px
                    color #00BB7A    
                >span:last-child 
                    width 75px
                    color #FF9502 
    .onePart
        height 360px
        width 100%
        position relative
        background-color #fff
        margin-bottom 10px
        >div:first-child 
            height 100%
            width 100%
            padding-top 25px
        .item 
            width 127px
            margin 30px 12px 0 0
            display inline-block
            >div:first-child 
                width 80px
                height 80px
            >div:last-child 
                color: rgba(89, 89, 89, 1);
                font-size: 12px;
                width 80px
                margin-top 7px
                text-align: center;
    .shouwMoare
        position absolute 
        top 20px
        right 34px 
        display flex 
        align-items center
        >div:first-child
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
        .btn 
            cursor pointer
            margin 0 7px 0 14px
            border-radius: 3px 
            height: 30px;
            >span
                width: 60px;
                display inline-block
                line-height: 28px;
                text-align: center;
                font-size: 12px;
                
            .whiteC 
                color: rgba(0, 0, 0, 0.65);
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(225, 225, 225, 1);
            .blueC 
                color #fff
                background-color: rgba(77, 134, 255, 1);
                border 1px solid ra(255,255,255,0)
        .el-button
            width: 74px;
            padding 0
            line-height : 28px;
            margin-left 22px
            text-align center
            display inline-block
            border-radius: 50px;
            background-color: rgba(255, 255, 255, 0);
            color: rgba(49, 150, 250, 1);
            font-size: 12px;
            border: 1px solid rgba(49, 150, 250, 1);
            >span  
                font-size 12px!important

</style>